<!DOCTYPE html>
<html>
  <head>
    <title>Cloud</title>
    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- Bootstrap CSS -->
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">

    <!-- date range -->
    <link rel="stylesheet" type="text/css" href="css/daterange.css">

    <!-- Main CSS -->
    <link href="css/main.css" rel="stylesheet" media="screen">

    <!-- Font Awesome CSS -->
    <link href="fonts/font-awesome.css" rel="stylesheet">
    
    <!--[if IE 7]>
      <link rel="stylesheet" href="fonts/font-awesome.css">
    <![endif]-->

    <!-- HTML5 shiv and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->

  </head>

  <body>

    <div class="container">

      <!-- Top bar start -->
      <div class="top-bar">
        
        <div class="logo">
          Trader<sup><i class="icon-glass"></i></sup>
        </div>

        <!-- Icon nav start -->
        <ul id="icon-nav">
          <li>
            <a href="#">
              <i class="icon-bell"></i>
              <span class="count-label"></span>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="icon-comment-alt"></i>
              <span class="count-label count-lb-yellow"></span>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="icon-envelope-alt"></i>
              <span class="count-label count-lb-green"></span>
            </a>
          </li>
        </ul>
        <!-- Icon nav end -->

        <!-- Search bar start -->
        <div class="custom-search hidden-xs">
          <input type="text" class="search-query" placeholder="搜索">
          <i class="icon-search"></i>
        </div>
        <!-- Search bar end -->

      </div>
      <!-- Top bar end -->

      <!-- Header start -->
      <header class="navbar" role="navigation">
        <div class="navbar-header">
          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="#" class="navbar-brand">&nbsp;</a>
        </div>
        <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
          
          <ul class="nav navbar-nav">
            <li class="active">
              <a href="index.html">设置</a>
            </li>
            <li>
              <a href="graphs.html">交易</a>
            </li>
            
            <li>
              <a href="tables.html">头寸</a>
            </li>
            <li>
              <a href="gallery.html">挂单</a>
            </li>

            <li>
              <a href="gallery.html">历史</a>
            </li>

            <li>
              <a href="gallery.html">历史</a>
            </li>


            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Bonus Pages <b class="caret"></b></a>
              <ul class="dropdown-menu">
                
                <li><a href="invoice.html">Invoice</a></li>
                <li><a href="calendar.html">Calendar</a></li>
                <li class="divider"></li>
                <li><a href="login.html">Login</a></li>
                <li class="divider"></li>
                <li><a href="error.html">404</a></li>
                <li><a href="blankpage.html">Blank Page</a></li>
              </ul>
            </li>
          </ul>
          
          <!-- Mini navigation start -->
          <ul class="nav navbar-nav navbar-right hidden-sm hidden-xs">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-user"></i> Sandy <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">My Account</a></li>
                <li><a href="calendar.html">My Calendar</a></li>
                <li><a href="#">My Inbox</a></li>
                <li class="divider"></li>
                <li><a href="login.html">Logout</a></li>
              </ul>
            </li>
          </ul>
          <!-- Mini navigation end -->
        </nav>
      </header>
      <!-- Header end -->

      <!-- Page title Start -->
      <div class="page-title">

        <div class="row ">
        
          <div class="col-md-6 col-sm-6 col-xs-6">
            <h2>Dashboard</h2>
            <ul class="breadcrumb">
              <li>Home</li>
              <li>Dashboard</li>
            </ul>
          </div>

          <div class="col-md-6 col-sm-6 col-xs-6">
            
            <!-- Mini Nav Right Start -->
            <ul id="page-settings">

              <li id="reportrange" >
                <i class="icon-calendar"></i>
                <span></span> <b class="caret"></b>
              </li>

              <li>
                <i class="icon-cog"></i>
              </li>
            </ul>
            <!-- Mini Nav Right End -->

            <!-- Stats Start -->
            <ul class="stats hidden-sm hidden-xs">
              <li>
                <span id="orders" class="graph"></span>
                <div class="details">
                  <span class="big">2,591</span>
                  <span class="small">Orders</span>
                </div>
              </li>
              <li>
                <span id="currentBalance" class="graph"></span>
                <div class="details">
                  <span class="big">$7,345</span>
                  <span class="small">Balance</span>
                </div>
              </li>
            </ul>
            <!-- Stats End -->

          </div>
        </div>
      </div>
      <!-- Page title end -->

      <div class="row">
        <div class="col-md-12 col-xs-12">
          <div class="panel panel-default">
            <div class="panel-heading clearfix">
              <i class="icon-calendar"></i>
              <h3 class="panel-title">Basic Panel Style</h3>
            </div>
            <div class="panel-sub-heading">
              <a href="#" data-original-title="" title="">By default, all the <code>.panel</code> does is apply some basic border and padding to contain some content.</a>
            </div>
            <div class="panel-body">
              <div class="row">
                <div class="col-md-12 col-sm-12">
                  <div class="panel panel-default no-margin">
                    <div class="panel-body">
                      Basic panel style
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>



      <div class="row">
        <div class="col-md-12 col-xs-12">
          <div class="panel panel-default">
            <div class="panel-heading clearfix">
              <i class="icon-calendar"></i>
              <h3 class="panel-title">Panel Styles</h3>
            </div>
            <div class="panel-sub-heading">
              <a href="#" data-original-title="" title="">6 different panel styles</a>
            </div>
            <div class="panel-body">
              <div class="row">
                <div class="col-md-4 col-sm-4">
                  <div class="panel panel-default">
                    <div class="panel-heading clearfix">
                      <i class="icon-calendar"></i>
                      <h3 class="panel-title">Panel Default</h3>
                    </div>
                    <div class="panel-sub-heading">
                      <a href="#" data-original-title="" title="">Sub Heading</a>
                    </div>
                    <div class="panel-body">
                      Panel content
                    </div>
                  </div>
                  <div class="panel panel-info no-margin">
                    <div class="panel-heading clearfix">
                      <i class="icon-calendar"></i>
                      <h3 class="panel-title">Panel Info</h3>
                    </div>
                    <div class="panel-sub-heading">
                      <a href="#" data-original-title="" title="">Sub Heading</a>
                    </div>
                    <div class="panel-body">
                      Panel content
                    </div>
                  </div>
                </div>
                <div class="col-md-4 col-sm-4">
                  <div class="panel panel-warning">
                    <div class="panel-heading clearfix">
                      <i class="icon-calendar"></i>
                      <h3 class="panel-title">Panel Warning</h3>
                    </div>
                    <div class="panel-sub-heading">
                      <a href="#" data-original-title="" title="">Sub Heading</a>
                    </div>
                    <div class="panel-body">
                      Panel content
                    </div>
                  </div>
                  <div class="panel panel-success no-margin">
                    <div class="panel-heading clearfix">
                      <i class="icon-calendar"></i>
                      <h3 class="panel-title">Panel Success</h3>
                    </div>
                    <div class="panel-sub-heading">
                      <a href="#" data-original-title="" title="">Sub Heading</a>
                    </div>
                    <div class="panel-body">
                      Panel content
                    </div>
                  </div>
                </div>
                <div class="col-md-4 col-sm-4">
                  <div class="panel panel-danger">
                    <div class="panel-heading clearfix">
                      <i class="icon-calendar"></i>
                      <h3 class="panel-title">Panel Danger</h3>
                    </div>
                    <div class="panel-sub-heading">
                      <a href="#" data-original-title="" title="">Sub Heading</a>
                    </div>
                    <div class="panel-body">
                      Panel content
                    </div>
                  </div>
                  <div class="panel panel-grey no-margin">
                    <div class="panel-heading clearfix">
                      <i class="icon-calendar"></i>
                      <h3 class="panel-title">Panel Grey</h3>
                    </div>
                    <div class="panel-sub-heading">
                      <a href="#" data-original-title="" title="">Sub Heading</a>
                    </div>
                    <div class="panel-body">
                      Panel content
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>


      <div class="row">
        <div class="col-md-12 col-xs-12">
          <div class="panel panel-default">
            <div class="panel-heading clearfix">
              <i class="icon-calendar"></i>
              <h3 class="panel-title">List Groups</h3>
            </div>
            <div class="panel-sub-heading">
              <a href="#" data-original-title="" title="">Different list styles</a>
            </div>
            <div class="panel-body">
              <div class="row">
                <div class="col-md-4 col-sm-4 col-sx-12">
                  <div class="panel panel-default no-margin">
                    <div class="panel-heading clearfix">
                      <i class="icon-calendar"></i>
                      <h3 class="panel-title">With Linked Items</h3>
                    </div>
                    <div class="panel-sub-heading">
                      <a href="#" data-original-title="" title="">Last 10 days</a>
                    </div>
                    <div class="panel-body">
                      <div class="list-group no-margin">
                        <a href="#" class="list-group-item active" data-original-title="">
                          Cras justo odio
                        </a>
                        <a href="#" class="list-group-item" data-original-title="">Dapibus ac facilisis in</a>
                        <a href="#" class="list-group-item" data-original-title="">Vestibulum at eros</a>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-4 col-sm-4 col-sx-12">
                  <div class="panel panel-default no-margin">
                    <div class="panel-heading clearfix">
                      <i class="icon-calendar"></i>
                      <h3 class="panel-title">With Badges &amp; Labels</h3>
                    </div>
                    <div class="panel-sub-heading">
                      <a href="#" data-original-title="" title="">Last 10 days</a>
                    </div>
                    <div class="panel-body">
                      <ul class="list-group no-margin">
                        <li class="list-group-item">
                          <span class="badge">14</span>
                          Cras justo odio
                        </li>
                        <li class="list-group-item">
                          <span class="badge">2</span>
                          Dapibus ac facilisis in
                        </li>
                        <li class="list-group-item">
                          <span class="badge">1</span>
                          Morbi leo risus
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="col-md-4 col-sm-4 col-sx-12">
                  <div class="panel panel-default no-margin">
                    <div class="panel-heading clearfix">
                      <i class="icon-calendar"></i>
                      <h3 class="panel-title">List Group</h3>
                    </div>
                    <div class="panel-sub-heading">
                      <a href="#" data-original-title="" title="">Last 10 days</a>
                    </div>
                    <div class="panel-body">
                      <ul class="list-group no-margin">
                        <li class="list-group-item">Cras justo odio</li>
                        <li class="list-group-item">Porta ac consectetur ac</li>
                        <li class="list-group-item">Vestibulum at eros</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>


      <div class="row">
        <div class="col-md-12 col-xs-12">
          <div class="panel panel-default">
            <div class="panel-heading clearfix">
              <i class="icon-calendar"></i>
              <h3 class="panel-title">Custom Content</h3>
            </div>
            <div class="panel-sub-heading">
              <a href="#" data-original-title="" title="">Add nearly any HTML within, even for linked list groups like the one below.</a>
            </div>
            <div class="panel-body">
              <div class="list-group">
                <a href="#" class="list-group-item active" data-original-title="" title="">
                  <h4 class="list-group-item-heading">List group item heading</h4>
                  <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                </a>
                <a href="#" class="list-group-item" data-original-title="" title="">
                  <h4 class="list-group-item-heading">List group item heading</h4>
                  <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                </a>
                <a href="#" class="list-group-item" data-original-title="" title="">
                  <h4 class="list-group-item-heading">List group item heading</h4>
                  <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>




    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Sparkline graphs -->
    <script src="js/sparkline.js"></script>

    <!-- Tyny Scrollbar -->
    <script src="js/tiny-scrollbar.js"></script>

    <!-- Date Range -->
    <script src="js/daterange/moment.js"></script>
    <script src="js/daterange/daterangepicker.js"></script>

    <!-- Custom JS -->
    <script src="js/custom.js"></script>
    <script src="js/custom-index.js"></script>

  </body>
</html>